<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function  ajax5(){
      //获取表单数据，组装成对象
      let user = document.querySelector(".user").value;
      let pw = document.querySelector(".pw").value;
      let data={//入库
        user1:user,
        pw1:pw
      }
      //字符串 对象--》后端--》对象 序列化
      let s=encodeURIComponent(JSON.stringify(data))


      //1创建ajax对象
      let xmlHttpRequest = new XMLHttpRequest();
      //2配置向后端请求类型get post 异步请求数据
      xmlHttpRequest.open("get","/web_war_exploded/ajax5?datajson="+s,true);
      //3监听数据是否请求成功
      xmlHttpRequest.onreadystatechange=function (){
        //服务和客户端握手
        if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){//服务器解析成功
           if (xmlHttpRequest.responseText=="success"){
             alert("数据入库成功")
          }
        }
      }

      //4发送请求
      xmlHttpRequest.send();
    }
  </script>
</head>
<body>
<div id="show" style="border: solid 3px red;width: 500px;height: 100px;background: lightgreen;">
  用户名:<input type="text" name="user" class="user"><br>
  密码:<input type="text" name="pw" class="pw"><br>
  <button onclick="ajax5()">提交</button>
</div>
</body>
</html>